import React from 'react'
import PropTypes from 'prop-types'
import { observer, inject } from 'mobx-react'
import themes from '../themes'
import ApiModel from '../../../api/apiModel/apiModel'
import './checkTheme.scss'

@inject('UserStore')
@observer
class CheckTheme extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props)
    this.state = {}
  }
  componentWillMount() {}
  componentDidUpdate() {}
  componentDidMount() {}
  componentWillUnmount() {}
  changeThemeChildFun = (index, array, type) => {
    if (type === 'add') {
      if (index + 1 >= array.length) {
        this.props.UserStore.changeThemeChild(array[0].key, 0)
      } else {
        this.props.UserStore.changeThemeChild(array[index + 1].key, index + 1)
      }
    } else {
      if (index - 1 < 0) {
        this.props.UserStore.changeThemeChild(
          array[array.length - 1].key,
          array.length - 1
        )
      } else {
        this.props.UserStore.changeThemeChild(array[index - 1].key, index - 1)
      }
    }
  }
  postTheme = () => {
    this.props.UserStore.changeUserState('uploadMsg')
    // let { theme, themeChild } = this.props.UserStore

    // let data = { theme: theme, theme_child: themeChild === 1 ? 11 : themeChild }
    // this.showOrHideLoading(true, 'loading')
    // ApiModel.postUserEntry(data).then((res) => {
    //   if (res.code === 0) {
    //     setTimeout(() => {
    //       this.showOrHideLoading(false, '')
    //       this.props.UserStore.changeUserState('uploadMsg')
    //     }, 500)
    //   } else {
    //     setTimeout(() => {
    //       this.showOrHideLoading(false, '')
    //       this.setErrorMsgFun('选择参赛主题失败<br/>请稍后重试')
    //     }, 500)
    //   }
    // })
  }
  setErrorMsgFun = (errorMsg) => {
    this.props.UserStore.setErrorMsg(true, errorMsg)
    this.timer = setTimeout(() => {
      this.props.UserStore.setErrorMsg(false, '')
    }, 3000)
  }
  showOrHideLoading = (flag, msg) => {
    this.props.UserStore.setPostOrGetData(flag, msg)
  }

  render() {
    let {
      mode,
      theme,
      themeIndex,
      themeChild,
      themeChildIndex,
    } = this.props.UserStore
    return (
      <div className="check-theme-container">
        <div className="theme-bkg-area">
          {mode === 1 && (
            <div className="theme-title xuexiao">
              <div className="theme-text">选择作品主题</div>
            </div>
          )}
          {mode === 2 && (
            <div className="theme-title jiating">
              <div className="theme-text">选择作品主题</div>
            </div>
          )}
        </div>
        <div className="theme-area">
          <div className="main-theme-area">
            {themes.map((item, index) => {
              return (
                <div
                  key={index}
                  className={
                    themeIndex === index
                      ? 'main-theme-item check'
                      : 'main-theme-item'
                  }
                  onClick={() => {
                    this.props.UserStore.changeTheme(item.key, index)
                  }}
                >
                  {item.name}
                </div>
              )
            })}
          </div>
          <div className="second-theme-area">
            {themes[themeIndex].childrens.map((item, index) => {
              return (
                <div key={index}>
                  {themeChildIndex === index ? (
                    <div>
                      <img
                        className="second-theme-item"
                        src={item.url}
                        alt=""
                      />
                      <div className="second-theme-desc">
                        {themes[themeIndex].name} - {item.name}
                      </div>
                    </div>
                  ) : null}
                  <img
                    onClick={() => {
                      this.changeThemeChildFun(
                        themeChildIndex,
                        themes[themeIndex].childrens,
                        'dsc'
                      )
                    }}
                    className="link-icon left"
                    src={require('../../../static/upload/icon_jiantou_zuo@3x.png')}
                    alt=""
                  />
                  <img
                    onClick={() => {
                      this.changeThemeChildFun(
                        themeChildIndex,
                        themes[themeIndex].childrens,
                        'add'
                      )
                    }}
                    className="link-icon right"
                    src={require('../../../static/upload/icon_jiantou_you@3x.png')}
                    alt=""
                  />
                </div>
              )
            })}
          </div>
          <div className="check-theme-desc">
            {/* 选择主题后，需要按照对应主题图片搭建作品 */}
            {/* 选择主题后，可选定参考图片建筑进行拼搭；也可自选本主题下“闵行区”其他特色建筑样式进行自由拼搭 */}
            可参考本主题下所选景区内的建筑物进行拼搭；也可选择本主题下"其他建筑"，针对「闵行区」其他特色建筑样式进行自由拼搭
          </div>
          <div
            className="theme-next"
            onClick={() => {
              this.postTheme()
            }}
          >
            确定主题
          </div>
        </div>
      </div>
    )
  }
}

export default CheckTheme
